<template>
  <div class="zone-layout">
    <div class="zone-top-layout">
      <div class="zone-top-title">{{articlechannel.name}}</div>
      <div @click="sendSkipToArticleChannel(articlechannel.id)" class="zone-top-more">更多</div>
    </div>
    <div @click="sendSkipToArticle(articlechannel.article_list.articles[0].id)" class="zone-head-layout">
      <img class="zone-head-img" :src="articlechannel.article_list.articles[0].cover_image"/>
      <div class="zone-head-shadow"></div>
      <div class="zone-head-bottom-show">
        <div class="zone-head-title">{{articlechannel.article_list.articles[0].title}}</div>
        <div class="mw-row-spacebetween-style" style="align-items: center;margin-top:0.04rem;color: rgba(255,255,255,0.4)">
          <div class="mw-row-style" style="align-items: center">
            <img class="mw-avatar-style" :src="articlechannel.article_list.articles[0].user.avatar" style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;"/>
            <div class="mw-single-line" style="font-size: 0.11rem;width:2rem;margin-left: 0.04rem;">{{articlechannel.article_list.articles[0].user.name}}</div>
          </div>
          <div class="mw-row-style" style="align-items: center">
            <img src="/static/read_eye.png" style="height:0.12rem;width:0.12rem;object-fit:cover;"/>
            <div  style="font-size: 0.11rem;margin-left: 0.04rem;">{{articlechannel.article_list.articles[0].views_total}}</div>
          </div>
        </div>
      </div>
    </div>
    <div @click="sendSkipToArticle(articlechannel.article_list.articles[1].id)" class="mw-row-spacebetween-style" style="padding:0.1rem;width:3.25rem;">
      <div class="mw-column-style" style="width:2.45rem;justify-content: space-between">
        <div class="mw-n-line mw-first-text-color " style="font-size:0.14rem;width: 100%;line-height: 0.2rem;">{{articlechannel.article_list.articles[1].title}}</div>
        <div class="mw-row-spacebetween-style" style="align-items: center;width:2.45rem;">
          <div class="mw-row-style" style="align-items: center">
            <img class="mw-avatar-style" :src="articlechannel.article_list.articles[1].user.avatar" style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;"/>
            <div class="mw-single-line mw-third-text-color" style="font-size: 0.11rem;width:1.8rem;margin-left: 0.04rem;opacity:0.8;">{{articlechannel.article_list.articles[1].user.name}}</div>
          </div>
          <div class="mw-row-style" style="align-items: center">
            <img src="/static/read_eye.png" style="height:0.12rem;width:0.12rem;object-fit:cover;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;margin-left: 0.04rem;opacity:0.8;">{{articlechannel.article_list.articles[1].views_total}}</div>
          </div>
        </div>
      </div>
      <img :src="articlechannel.article_list.articles[1].cover_image" style="width:0.7rem;height:0.7rem;object-fit:cover;"/>
    </div>
    <div class="mw-horizon-divider" style="width:2.45rem;margin-left:0.1rem;"></div>
    <div @click="sendSkipToArticle(articlechannel.article_list.articles[2].id)" class="mw-row-spacebetween-style" style="padding:0.1rem;width:3.25rem;">
      <div class="mw-column-style" style="width:2.45rem;justify-content: space-between">
        <div class="mw-n-line mw-first-text-color " style="font-size:0.14rem;width: 100%;line-height: 0.2rem;">{{articlechannel.article_list.articles[2].title}}</div>
        <div class="mw-row-spacebetween-style" style="align-items: center;width:2.45rem;">
          <div class="mw-row-style" style="align-items: center">
            <img class="mw-avatar-style" :src="articlechannel.article_list.articles[2].user.avatar" style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;"/>
            <div class="mw-single-line mw-third-text-color" style="font-size: 0.11rem;width:1.8rem;margin-left: 0.04rem;opacity:0.8;">{{articlechannel.article_list.articles[2].user.name}}</div>
          </div>
          <div class="mw-row-style" style="align-items: center">
            <img src="/static/read_eye.png" style="height:0.12rem;width:0.12rem;object-fit:cover;"/>
            <div class="mw-third-text-color" style="font-size: 0.11rem;margin-left: 0.04rem;">{{articlechannel.article_list.articles[2].views_total}}</div>
          </div>
        </div>
      </div>
      <img :src="articlechannel.article_list.articles[2].cover_image" style="width:0.7rem;height:0.7rem;object-fit:cover;"/>
    </div>
  </div>

</template>
<script>
  import utils from '../utils'
  import httputil from '../httputil'
  export default {
    props: ['articlechannel'],
    data() {
      return {

      }
    },
    computed: {},

    methods: {
      sendSkipToArticle(item){
        this.$emit('receiveSkipToArticle',item)
      },
      sendSkipToArticleChannel(item) {
        this.$emit('receiveSkipToArticleChannel',item)
      }
    }
  }

</script>
<style>

</style>
